<template>
    <!-- 视频监控-智能监控-报警设置 -->
    <div class="mainContent">
        <div class="mainBox">
            <div class="search">
                <div class="list">
                    <el-button :type="warnList.length ===0?'info':'primary'" @click="updateRow(0)" size="small" plain :disabled="warnList.length ===0 || !btnList.includes('fvs/warnSetting/recept')">管理消息接收人</el-button>
                </div>
            </div>
            <div class="tabBox">
                <div class="tableList">
                    <el-table :data="tableData" :height="tableHeight" :stripe="true" @select="listSelectOne" @select-all="listSelectALL">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column prop="name" label="报警类型" width="200px"></el-table-column>
                        <!-- <el-table-column label="短信接收" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.msgChannelList.includes(4)">√</span>
                                <span v-else> x </span>
                            </template>
                        </el-table-column> -->
                        <el-table-column label="APP接收" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.msgChannelList.includes(1)">√</span>
                                <span v-else> x </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="后台接收" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.msgChannelList.includes(3)">√</span>
                                <span v-else> x </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="消息接收人" prop="nickName" width="300px">
                            <template slot-scope="scope">
                                <Tooltip  transfer :content="scope.row.nickName ? scope.row.nickName : '—' " placement="top-start"  max-width='200'>
                                    <div class="p" style="width:280px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;">
                                        {{scope.row.nickName ? scope.row.nickName : '—' }}
                                    </div>
                                </Tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150px" fixed="right" align="center">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="updateRow(1, scope.$index, tableData)" type="text" size="small" style="color:#1891ff;" :disabled="!btnList.includes('fvs/warnSetting/edit')">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="tableData.length > 0">
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="updateModal" :title="isAdd ? '管理消息接收人' : '编辑消息接收人'" width="660px;" :mask-closable="false" class-name="msgModal">
            <div class="ask">
                <span>通知方式:</span>
                <el-checkbox-group v-model="checkList">
                    <!-- <el-checkbox label="短信通知"></el-checkbox> -->
                    <el-checkbox label="APP通知"></el-checkbox>
                    <el-checkbox label="后台通知"></el-checkbox>
                </el-checkbox-group>
            </div>
            <el-transfer v-model="list" :data="msgList" :titles="['所有接收人员', '已有接收人员']"></el-transfer>
            <div slot="footer">
                <el-button @click="cancel(0)" style="padding:7px 25px;border-radius: 15px;" type="info" plain size="mini">取消</el-button>
                <el-button @click="suBmitAll" style="padding:7px 25px;border-radius: 15px;" type="primary" size="mini" v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>
<script>

import {
    getFimRuleList,
    getFimRuleSetUser,
    getMsgRuleAvailableUsers
} from "@/api/api.js";
export default {
    data() {
        return {
            deptId: "",
            list: [],
            msgList: [],
            tableData: [],
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            isAdd: false,
            updateModal: false,
            count: 0,
            updataID: "",
            warnList: [],
            checkList: [],
            TZList: [
                {
                    id: 1,
                    name: "APP通知"
                },
                {
                    id: 2,
                    name: "公众号通知"
                },
                {
                    id: 3,
                    name: "后台通知"
                },
                {
                    id: 4,
                    name: "短信通知"
                }
            ],
            tableHeight:window.innerHeight - 305,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getList();
            }
        }
    },
    methods: {
        getList() {
            this.tableData = [];
            let parmas = {
                deptId: this.deptId,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            };
            getFimRuleList(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data.list;
                        for (let i in this.tableData) {
                            let operEmpNameStr = [];
                            for (let j in this.tableData[i].userList) {
                                operEmpNameStr.push(this.tableData[i].userList[j].nickName);
                                this.tableData[i]["nickName"] = operEmpNameStr.join(",");
                            }
                        }
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        pageChange(index) {
            this.pageNum = index;
            this.getList();
        },
        getuserList(arr) {
            this.msgList = [];
            let parmas = {
                deptId: this.deptId
            };
            getMsgRuleAvailableUsers(parmas).then(res => {
                if (res.code == 200) {
                    let list = res.data.list;
                    let newobj = {};
                    list = list.reduce((preVal, curVal) =>{
                        newobj[curVal.userId] ? '' : newobj[curVal.userId] = preVal.push(curVal);
                        return preVal
                    }, []);
                    for (let i in list) {
                        this.msgList.push({
                            key: i.toString(),
                            label: list[i].nickName + list[i].phone,
                            userId: list[i].userId,
                            phone: list[i].phone,
                            username: list[i].username,
                            nickName: list[i].nickName
                        });
                    }
                    if (!this.isAdd) {
                        this.list = [];
                        for (var i = 0; i < arr.length; i++) {
                            for (var j = 0; j < this.msgList.length; j++) {
                                if (arr[i].userId == this.msgList[j].userId) {
                                    this.list.push(j.toString());
                                }
                            }
                        }

                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => {
                console.log(error);
            });
        },
        updateRow(type, index, rows) {
            if (type == 0) {
                this.isAdd = true;
                this.checkList = [];
                this.list = [];
                this.getuserList();
            } else if (type == 1) {
                this.isAdd = false;
                this.checkList = [];
                for (let i in rows[index].msgChannelList) {
                    for (let j in this.TZList) {
                        if ( rows[index].msgChannelList[i] == this.TZList[j].id) {
                            this.checkList.push(this.TZList[j].name);
                        }
                    }
                }
                this.getuserList(rows[index].userList);
                this.updataID = rows[index].id;
            }
            this.updateModal = true;
        },
        suBmitAll() {
            var arr = [];
            for (let i in this.list) {
                for (let j in this.msgList) {
                    if (this.list[i] == this.msgList[j].key) {
                        arr.push({
                            userId: this.msgList[j].userId,
                            nickName: this.msgList[j].nickName,
                            phone: this.msgList[j].phone
                        });
                    }
                }
            }
            let msgChannelList = [];
            for (let i in this.checkList) {
                for (let j in this.TZList) {
                    if (this.checkList[i] == this.TZList[j].name) {
                        msgChannelList.push(this.TZList[j].id);
                    }
                }
            }
            let parmas;
            let idList = [];
            if (this.isAdd) {
                this.warnList.forEach(i => {
                    idList.push(i.id);
                });
                parmas = {
                    idList: idList,
                    userList: arr,
                    msgChannelList: msgChannelList
                };
            } else {
                parmas = {
                    idList: [this.updataID],
                    userList: arr,
                    msgChannelList: msgChannelList
                };
            }
            getFimRuleSetUser(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.updateModal = false;
                        this.$Message.success("操作成功");
                        this.pageNum = 1;
                        this.current = 1;
                        this.getList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        cancel(type) {
            if (type == 0) {
                this.updateModal = false;
            }
        },
        //多选
        listSelectOne(selection, row) {
            this.warnList = selection;
        },
        //全选
        listSelectALL(selection, row) {
            this.warnList = selection;
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getList();
    }
};
</script>
<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/fvs/modal.less";
</style>
<style lang="scss" scoped>
// @import "./../../assets/style/fvs/mainContent.scss";
@import "./../../assets/style/fvs/msgModal.scss";
.mainContent{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .mainBox{
        width: 100%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #ffffff;
        .search{
            margin-bottom: 10px;
        }
    }
}
.tag {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    position: relative;
    .msg {
        width: 200px;
        margin-left: 255px;
    }
    .btn {
        width: 150px;
        position: absolute;
        right: 0;
    }
}
.ask {
    width: 100%;
    margin: 0 auto;
    display: flex;
    height: 30px;
    justify-content: flex-start;
    align-items: center;
    border-radius: 20px;
    border: 1px solid #e5e5e5;
    margin-bottom: 10px;
    span {
        margin-right: 10px;
        margin-left: 10px;
    }
}
</style>
